<template>
  <div class="login">
    <div class="login_content">
      <div class="login_img">

      </div>
      <div class="login_form">
        <div class="login_form_header">
          <div class="header_img">
            <img class="img" src="@/assets/images/logo.jpg" alt="">
          </div>
          <div class="header_title">xxxxxxxxxxxxxxxxxxxxxxx系统</div>
        </div>
        <div class="login_form_body">
          <el-form :model="form" style="min-width: 300px;">
            <el-form-item label="账 号：" label-position="right">
              <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密 码：" label-position="right">
              <el-input v-model="form.passWord" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="success" @click="normalLogin">普通用户访问</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';


const router = useRouter();
const form = reactive({
  userName: '',
  passWord: '',
});
const login = () => {
  localStorage.setItem('token', 'admin');
  router.push('/QualityAssessment');
};
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  width: 100%;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;

  .login_content {
    width: calc(100% - 30%);
    height: calc(100% - 45%);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    box-shadow: 5px 5px 10px 10px #807e7e24;

    .login_img {
      width: 60%;
      height: 100%;
      background-color: #1232f2;
    }

    .login_form {
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .login_form_header {
        margin-top: 20px;
        width: 100%;
        height: 40%;

        .header_img {
          height: 50%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .img {
            height: 60px;
            width: 60px;
          }
        }

        .header_title {
          margin-left: 20%;
          width: 60%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28px;
          font-weight: bolder;
          color: #3b7ff4;
          text-align: center;
        }
      }

      .login_form_body {
        height: 30%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        /deep/.el-form-item__label {
          font-weight: bolder;
          font-size: 16px;
        }
      }

      .footer {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
